<template>
  <div>
    <div class="box-margin">
      <div>
        <haier-banner :urls="bannerImages" />
      </div>
      <div class="tags-bg">
        <div></div>
        <div class="tags">
          <h1>心选精品</h1>
          <div>
            <div
              v-for="({ name }, index) in tags"
              :key="index"
              @click="onTagClick(index)"
            >
              <span :class="{ line: currentTag == index }">{{ name }}</span>
              <div class="tags-content" v-show="index == 0">
                <div class="tags-comm main-comm">
                  <el-image :src="main.img" />
                  <span>{{ main.title }}</span>
                  <span>{{ main.desc }}</span>
                </div>
                <div>
                  <div
                    v-for="(item2, i) in tagRecommend"
                    :key="i"
                    class="tags-comm"
                  >
                    <img :src="item2.img" alt="" srcset="" />
                    <span>{{ item2.title }}</span>
                    <span>{{ item2.desc }}</span>
                  </div>
                </div>
              </div>
            </div>
            <p></p>
          </div>
        </div>
      </div>
      <div>
        <haier-banner :urls="bannerImages" height="800px" />
      </div>
      <div class="hot-footer">
        <haier-tabs width="80%" title="人气排行" :tabs="footerTabs">
          <div slot-scope="{ tab }">
            <div v-if="tab.tab.items">
              <div
                v-for="(commodity, index) in tab.tab.items"
                :key="index"
                :class="'hot-commodity'"
              >
                <div>
                  <el-image :src="commodity.img" />
                </div>
                <div>
                  <span>{{ commodity.name }}</span>
                  <span>{{ commodity.id }}</span>
                  <span>了解更多</span>
                </div>
              </div>
            </div>
          </div>
        </haier-tabs>
      </div>
      <div class="footer-1">
        <div v-for="(item, index) in footer1" :key="index">
          <div>
            <el-image :src="item.img"></el-image>
          </div>
          <div>
            <span>{{ item.label }}</span>
            <span>{{ item.desc }}</span>
          </div>
        </div>
      </div>
      <div class="footer-2">
        <haier-tabs title="品牌咨询" width="80%">
          <template #body>
            <div class="footer-2-body">
              <div>
                <div>
                  <el-image :src="footer2.img" />
                </div>
                <div>
                  <h1>{{footer2.text}}</h1>
                  <span>{{footer2.desc}}</span>
                </div>
              </div>
              <div>
                <ul>
                  <li v-for="(item, index) in footer2.items" :key="index">
                    <h2>{{ item.text }}</h2>
                    <span>{{item.desc}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </template>
        </haier-tabs>
      </div>
      <div class="footer-3">
        <haier-tabs title="品牌链接">
          <template #body>
            <div class="footer-3-content">
              <div v-for="(item, index) in footer3.items" :key="index">
                  <img :src="footer3.img">
                  <img :src="item.img">
              </div>
            </div>
          </template>
        </haier-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import navlist from "@/assets/secondnav.json";
import navdata from "@/assets/nav.json";
import Banner from "@/components/Banner";
import Tabs from "@/components/Tabs";

export default {
  name: "App",
  data: () => {
    return {
      topic: Array.from(navdata),
      bannerImages: [],
      tags: [],
      currentTag: 0,
      footerTabs: [
        { label: "冰箱", items: [{}, {}, {}] },
        { label: "洗衣机" },
        { label: "空调" },
        { label: "热水器" },
        { label: "电视" },
        { label: "油烟机" },
        { label: "燃气灶" },
      ],
      tagRecommend: [{}, {}, {}, {}],
      main: {
        img: "https://image.haier.com/cn/W020200918477468353528_580.png",
      },
      BottomNav: navlist,
      mapping: {
        label: "name",
      },
      footer1: [
        {
          img: require("@/assets/static/left.webp"),
          label: "全屋购",
          desc:
            "旗舰品质，一站购齐！当你踏进家门的一刻，生活变得更智慧，一键开启空调、电视、扫地机器人，回家即是安心。",
        },
        {
          img: require("@/assets/static/right.webp"),
          label: "活动集结地",
          desc:
            "玩转好家电，超值不败家！家电活动，限时抢疯狂购！现在下手还不晚！",
        },
      ],
      footer2: {
        img: require("@/assets/static/footer2.webp"),
        text: "以IEC国际保鲜标准丈量世界新鲜刻度！查干湖...",
        desc:
          "一年一度的查干湖冬捕节拉开帷幕，作为国家地理标志产品的胖头鱼也再次牵动了万千食客的心。可是，如何辨别肥美的胖头鱼是否新鲜？冷冻后的鱼能否新鲜如初？",
        items: [
          {
            text: "厨房功能不限于做饭！三翼鸟厨房：健康饮食、智慧烹饪都可以",
            desc:
              "谈及厨房承担的角色，以往大家可能只会想到做饭。而现在，三翼鸟厨房却给出了全新的打开方式：不仅限于做饭，还能提...",
          },
          {
            text: "可全球通用的冰箱保鲜标准在海尔问世，获IEC认证",
            desc:
              "2020年7月，IEC国际保鲜标准正式发布。随后，该标准又取得重要进展：海尔冰箱提出的“羊毛片”测试法获准通过，为IE...",
          },
          {
            text: "海尔智家H股鸣锣，将成为中国第一家物联网化的上市公司",
            desc:
              "12月23日，海尔集团旗下海尔智家股份有限公司（以下简称“海尔智家”）在香港联合交易所主板上市。这意味着海尔智家...",
          },
        ],
      },
      footer3: {
        img: require("@/assets/static/linkbg.webp"),
        items: [
          {img: require('@/assets/brand-icon/01.png')},
          {img: require('@/assets/brand-icon/02.png')},
          {img: require('@/assets/brand-icon/03.webp')},
          {img: require('@/assets/brand-icon/04.png')},
          {img: require('@/assets/brand-icon/05.png')},
          {img: require('@/assets/brand-icon/06.png')},
          {img: require('@/assets/brand-icon/07.png')},
          {img: require('@/assets/brand-icon/08.webp')},
        ]
      }
    };
  },
  methods: {
    switchBanner(index, done) {
      console.log(index);
      console.log(done);
    },
    onTagClick(index) {
      this.currentTag = index;
      this.loadTagRecommend(this.tags[index] ? this.tags[index].id : 0);
    },
    onNavItemClick(item) {
      let { id } = item;
      id &&
        this.$router.push({
          path: "/haier/details",
          params: {
            id: id,
          },
        });
    },
    loadTagRecommend(tag) {
      this.$haier
        .get("openapi/list/recommend", {
          filter: this.$arg({
            tag: tag instanceof Array ? tag : Array.of(tag),
          }),
        })
        .then(({ data }) => {
          console.log(data);
        });
    },
    loadTag() {
      this.$haier.get("openapi/list/tag").then(({ data }) => {
        this.tags = data;
        this.onTagClick(0);
      });
    },
    loadAllTopic() {
      this.$haier
        .get("openapi/list/topic", { cascade: true })
        .then(({ data }) => {
          this.topic.splice(1, 1, data[0]);
        });
    },
    loadBanner() {
      this.getAssets("banner", 4).then(({ data }) => {
        this.bannerImages = data.map((img) =>
          this.$url(`openapi/assets/${img.content}?path=/`)
        );
        console.log(this.bannerImages);
      });
    },
  },
  components: {
    "haier-banner": Banner,
    "haier-tabs": Tabs,
  },
  created() {
    this.loadBanner();
    this.loadTag();
    this.loadAllTopic();
  },
};
</script>

<style scoped>
.box-margin {
  width: 90%;
  margin: 0 auto;
}

.tags-bg {
  position: relative;
  height: 750px;
  padding-bottom: 100px;
}

.tags-bg > div:first-child {
  content: "";
  display: block;
  position: absolute;
  height: 300px;
  width: 100%;
  bottom: 0;
  background: #f6f7f9;
}

.tags {
  position: relative;
  width: 80%;
  margin: 0 auto;
  height: inherit;
  text-align: center;
  margin: 0 auto;
}

.tags > div > div {
  display: inline-block;
  margin-left: 5%;
  margin-right: 5%;
}

.tags p {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.164);
}

.tags > h1 {
  padding-bottom: 40px;
  padding-top: 40px;
}

.tags div > span {
  cursor: pointer;
  display: inline-block;
  font-size: 1.2em;
  color: #444444;
  padding-bottom: 10px;
}

.tags-content {
  position: absolute;
  width: 100%;
  left: 0;
  top: 150px;
  height: 590px;
}

.tags-content > div {
  position: absolute;
  width: 38%;
  top: 20px;
  bottom: 0;
  text-align: center;
}

.tags-content > div:first-of-type {
  height: 100%;
  background: #e8ebf2;
}

.tags-content > :last-child {
  left: 40%;
  width: 60%;
}

.tags-content > :last-child > div {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 295px;
}

.tags-comm {
  text-align: center;
}

.tags-comm img {
  position: relative;
  bottom: 10px;
  margin-top: 20px;
}

.tags-comm span {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 50px;
}

.tags-comm span:first-of-type {
  font-size: 1em;
  color: #00000069;
  display: block;
}

.tags-comm span:last-of-type {
  font-size: 0.8em;
  color: #555555;
  display: block;
  bottom: 20px;
}

.tags-comm:hover {
  border-bottom: 8px #004ea1 solid;
  box-shadow: 5px 5px 10px #888888;
  background: white;
}

.line {
  border-bottom: 5px #004ea1 solid;
}

.hot-footer {
  padding: 40px;
}

.hot-commodity {
  position: relative;
  width: 380px;
  height: 600px;
  display: inline-block;
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.12);
  text-align: center;
}

.hot-commodity:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
}

.hot-commodity > div:last-child {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-bottom: 40px;
  padding-top: 20px;
}

.hot-commodity span {
  display: block;
  margin: 0 auto;
}

.hot-commodity span:last-child {
  width: 100px;
  border: 1px #0c5ca8 solid;
  padding: 10px;
  border-radius: 30px;
}

.footer-1 {
  height: 550px;
  width: 70%;
  margin: 0 auto;
  padding-bottom: 100px;
}

.footer-1 > div {
  width: 50%;
  height: inherit;
  display: inline-block;
  position: relative;
}

.footer-1 span {
  display: block;
}

.footer-1 span:first-child {
  font-size: 2em;
  font-weight: bold;
  padding-bottom: 20px;
}

.footer-1 span:last-child {
  font-size: 0.8em;
  width: 60%;
  margin: 0 auto;
}

.footer-1 > div > * {
  position: absolute;
  width: 100%;
  text-align: center;
}

.footer-1 > div:last-child > div:first-child,
.footer-1 > div:first-child > div:last-child {
  bottom: 0;
}

.footer-1 > div:first-child * {
  text-align: left;
  margin: 0;
}

.footer-1 > div:hover .el-image {
  display: block;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.12);
  border-bottom: 5px #0c5ca8 solid;
}

.footer-2-body{
  padding-top: 60px;
  position: relative;
  width: 100%;
  height: 600px;
  padding-bottom: 50px;
}

.footer-2-body > div{
  position: absolute;
  height: inherit;
  width: 30%;
  display: inline-block;
}


.footer-2-body >div:hover:first-child *,
.footer-2-body ul>li:hover *{
  color: #004ea1;
}

.footer-2-body >div:first-child{
  left: 0;
  width: 55%;
}

.footer-2-body > div:first-child> div:last-child{
  position: absolute;
  bottom: 55px;
}

.footer-2-body > div:first-child span:last-child{
  display: block;
  text-align: left;
  width: 90%;
  margin: 0 auto;
  padding-top: 40px;
  font-size: 0.9em;
  color: #000;
  padding-bottom: 20px;
  border-bottom: 2px rgba(128, 128, 128, 0.438) solid;
}

.footer-2-body >div:last-child{
  right: 10%;
}

.footer-2-body li{
  position: relative;
  height: inherit;
  height: 180px;
  border-bottom: 2px rgba(128, 128, 128, 0.438) solid;
}

.footer-2-body li>h2{
  padding-top: 40px;
  font-size: 1.2em;
  text-align: left;
  color: black;
}

.footer-2-body li>span{
  display: block;
  text-align: left;
  font-size: 0.8em;
  color: rgba(0, 0, 0, 0.657);
}



.footer-3{
  padding-bottom: 200px;
}

.footer-3-content > div{
    display: inline-block;
    height: 150px;
    width: 150px;
    position: relative;
    margin: 10px;
}

.footer-3-content > div > *{
    position: absolute;
    cursor: pointer;
}

.footer-3-content > div > img:last-child{
    top: 40px;
}

.footer-3-content > div:hover::after{
    
    content: "";
    position: absolute;
    display: inline-block;
    background: transparent;
    left: 120px;
    width: 50%;
    bottom: 20px;
    padding-top: 2px;
    box-shadow: 0px 20px 40px black;
}

</style>
